<template>
    <div class="login-page">
        <p class="title">登录</p>
        <a-form :form="form" @submit="onSubmit">
            <a-form-item>
                <a-input placeholder="账号" size="large"
                    v-decorator="['username',
                        { rules: [
                            { required: true, message: '请输入账号' },
                        ] }
                    ]"
                >
                    <a-icon slot="prefix" type="mobile" class="icon"/>
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-input placeholder="密码" size="large" type="password"
                     v-decorator="['password',
                        { rules: [
                            { required: true, message: '请输入密码' },
                        ] }
                    ]"
                >
                    <a-icon slot="prefix" type="lock" class="icon"/>
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" block size="large" html-type="submit" :loading="loading">登录</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
import { userLogin } from '../services';

export default {
    name: 'Login',
    data(){
        return {
            form: this.$form.createForm(this),     // 初始化表单
            loading: false,                        // 登录按钮加载状态
        }
    },
    methods: {
        // 点击登录
        onSubmit(e){
            e.preventDefault();
            const _that = this;
            this.form.validateFields((err, values) => {
                if (!err) {
                    _that.onLogin(values);
                }
            })
        },
        // 请求接口
        async onLogin(params){
            this.loading = true;
            let res = await userLogin(params);
            this.loading = false;
            const _that = this;
            if(res.success){
                // 登录成功
                this.$message.success('登录成功', 1, () => {
                    // localStorage.setItem('token', '123456');
                    _that.$router.replace({ name: 'Home' });
                })
            }else{
                // 失败
                if(!res.errorMessage) return;
                this.$message.error(res.errorMessage, 1);
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import '../global.less';
.login-page{
    min-width: 350px;
    width: 350px;
    margin: 0 auto;
    padding-top: 180px;
    .title{
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .icon{
        color: @primary;
        font-size: 16px;
    }
}
</style>